<template>
	<view>
		<loadPage :loading="showLoading"></loadPage>
		<template v-if="!showLoading">
			<view class="icardwidth">
				<SubSection :list="sectionList" @change="sectionChange" class="sticky"></SubSection>
				<u-empty v-if="!collectinfo.length" class="needisempty" textSize="30" text="暂无收藏" mode="order"
					iconSize="240rpx" font-size="40rpx" marginTop="200">
				</u-empty>
				<u-swipe-action v-else>
					<u-swipe-action-item v-for="(item, index) in collectinfo" :index="item.productId"
						:key="item.productId" @click="cancelCollect(item.productId)" :options="options">
						<collectcard :details="item"></collectcard>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
			<u-back-top :scroll-top="scrollTop" mode="square" tips="顶部"></u-back-top>
			<u-divider v-if="inbottom" color="#878787" bg-color="#f5f5f5" margin-top="60" margin-bottom="60">到底了
			</u-divider>
			<!-- 底部适配 -->
			<view class="adaptation"></view>
		</template>
	</view>
</template>
<script>
	import needcollectcard from './collectcard/needcollectcard.vue'
	import collectcard from './collectcard/collectcard.vue'
	import SubSection from "components/common/subSection"
	import loadPage from 'components/common/loadPage'
	import {
		cancelProductCollection,
		getFarmerProductCollects
	} from 'apis/farmer/record.js'

	const sectionList = Object.freeze([{
			label: "农户初级",
			value: "0"
		},
		{
			label: "公司初级",
			value: "1"
		},
		{
			label: "公司加工",
			value: "2"
		}
	])

	export default {
		components: {
			collectcard,
			needcollectcard,
			loadPage,
			SubSection
		},
		data() {
			return {
				curNow: 0,
				sectionList,
				//回到顶部
				pageNumber: 0,
				scrollTop: 0,
				//  类型
				type: 0,
				// 分页
				pageNo: 1,
				pageSize: 10,
				inbottom: false,
				showpopup: false,
				showLoading: true,
				collectinfo: [],
				options: [{
					disabled: true,
					text: '取消收藏',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		methods: {
			sectionChange(type) {
				this.collectinfo = []
				this.pageNo = 1
				this.type = type
				this.reqMyCollectOfDate()
			},
			cancelCollect(uuid) {
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除吗？',
					success: async res => {
						if (res.confirm) {
							const {
								code,
								msg
							} = await cancelProductCollection(uuid)
							if (code === 200) {
								this.collectinfo = this.collectinfo.filter(item => item.productId !== uuid)
							} else {
								return this.$errorMsg(msg)
							}
						}
					}
				})
			},
			//根据时间段获取收藏
			async reqMyCollectOfDate() {
				const {
					type,
					pageNo,
					pageSize
				} = this
				const result = await getFarmerProductCollects(type, pageNo, pageSize)
				if (result.code === 200) {
					this.collectinfo = [...this.collectinfo, ...result.data.list]
					this.pageNo++
				}
			}
		},
		async onLoad() {
			await this.reqMyCollectOfDate()
			this.showLoading = false
		},
		onPageScroll(e) { //页面滚动
			this.scrollTop = e.scrollTop
		},
		onReachBottom() { //到达底部
			this.reqMyCollectOfDate();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		}
	}
</script>

<style>
	@import url("mycollect.css");

	.u-swipe-action-item.data-v-2fea6ae7 {
		position: relative;
		overflow: hidden;
		margin: 10px 0;
	}

	.u-swipe-action-item__right .data-v-2fea6ae7 {
		margin: 2px 0;
	}
</style>
